<template>
  <view class="sealManagement">
    <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
    <me-tabs v-model="tabs.index" :height="80" :tabs="tabs.list" fixed nameKey="name"></me-tabs>
    <swiper :current="tabs.index" :style="{ height: swiper.height }" @change="swiperChange">
      <swiper-item v-for="(tab, i) in tabs.list" :key="i">
        <mescroll-item
          ref="mescrollItem"
          :i="i"
          :index="tabs.index"
          :option="option"
          :seach="popup.form"
          :tabs="tabs.list"
          :top="swiper.top"
        ></mescroll-item>
      </swiper-item>
    </swiper>
    <!-- 搜索悬浮 -->
    <view class="sousuo" @tap="search_data">
      <view class="iconfont icon-ziyuan"></view>
    </view>
    <!-- 搜索表单 -->
    <u-popup v-model="popup.show" border-radius="10" mode="center">
      <view class="u-popup">
        <view v-if="tabs.list.length > 0" class="u-popup-title">
          {{ tabs.list[tabs.index].name }}
        </view>
        <view class="u-popup-center">
          <u-form ref="uForm" :model="popup.form" label-width="180">
            <u-form-item :label="$t('章名')">
              <u-input v-model="popup.form.deviceName" />
            </u-form-item>
            <u-form-item :label="$t('管章人')">
              <u-input v-model="popup.form.userName" />
            </u-form-item>
          </u-form>
        </view>
        <view class="u-popup-foot">
          <text class="text" @click="popup.show = false">{{$t('取消')}}</text>
          <text class="text text2" @click="seachComfig">{{$t('确定')}}</text>
        </view>
      </view>
    </u-popup>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import MescrollItem from './mescroll-swiper-item.vue'
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  components: {
    MescrollItem
  },
  data() {
    return {
      tabs: {
        index: 0,
        list: []
      },
      swiper: {
        height: '100%',
        top: 80
      },
      option: '', //当前页面信息，从哪里点进的
      popup: {
        show: false,
        form: {
          deviceName: '', //章名
          userName: '' //管章人
        }
      }
    }
  },
  onLoad(option) {
    // #ifdef H5
    this.swiper.top = 0
    // #endif
    this.option = option
    //设置标题
    uni.setNavigationBarTitle({
      title: this.$t(option.name)
    })
    //获取印章分类
    this.getByOrgToApp()
  },
  methods: {
    //确定搜索
    seachComfig() {
      this.popup.show = false
      this.$refs.mescrollItem[this.tabs.index].downCallback()
    },
    //点击悬浮
    search_data() {
      this.popup.show = true
    },
    //获取印章分类
    getByOrgToApp() {
      this.$u.get(this.api.GLOBAL_deviceType_getByOrg, {}).then((res) => {
        if (res.code === 200) {
          let filList = res.data.filter((item) => item.name === '所有章')
          if (filList.length > 0) {
            this.tabs.list = res.data.map(l => ({
              ...l,
              name: this.$t(l.name)
            }))
          } else {
            this.tabs.list = [
              {
                id: '',
                name: this.$t('所有章'),
                orgId: -1
              },
              ...res.data.map(l => ({
                ...l,
                name: this.$t(l.name)
              }))
            ]
          }
        }
      })
    },
    // 轮播菜单
    swiperChange(e) {
      this.tabs.index = e.detail.current
    }
  }
}
</script>

<style lang="scss" scoped>
.sealManagement {
  background-color: #f0f0f0;
  height: 100%;

  .u-popup {
    padding: 20rpx 20rpx 0;

    .u-popup-title {
      width: 100%;
      text-align: center;
    }

    .u-popup-center {
    }

    .u-popup-foot {
      display: flex;
      justify-content: space-between;

      .text {
        flex: 1;
        text-align: center;
        line-height: 80rpx;
      }

      .text2 {
        color: #007aff;
      }
    }
  }

  .sousuo {
    position: absolute;
    bottom: 30upx;
    right: 10upx;
    background: #009bde;
    border-radius: 50%;
    width: 80upx;
    height: 80upx;
    text-align: center;
    line-height: 80upx;
    color: white;
  }
}
</style>
